/**
 * 
 * @authors Your Name (you@example.org)
 * @date    2019-03-28 18:36:48
 * @version $Id$
 */



// 转动事件
var Effect = function (a, w, h, s, p, x, y) {
  var _3Deffect = function (array, width, height, stage, per, x, y) {
    this.oDoc = document
    this.stage = stage
    this.width = width
    this.height = height
    this.path = array
    this.domStr = '<dt id="shadow"></dt>';
    (this.perspective = per),
      (this.rotateX = x),
      (this.rotateY = y),
      (this.speedX = 0),
      (this.speedY = 0)
  }
  _3Deffect.prototype = {
    transform: function (elem, value, key) {
      key = key || 'transform';
      ['-webkit-', '-moz-', '-ms-', '-o-', ''].forEach(function (pre) {
        elem.style[pre + key] = value
      })
      return elem
    },
    piece: function (value, key) {
      var str = '';
      key = key || 'transform';
      ['-webkit-', '-moz-', '-ms-', '-o-', ''].forEach(function (pre) {
        str += key + ':' + pre + value
        return false
      })
      return str
    },
    addEvent: function (obj, sEvent, fn) {
      if (obj.attachEvent) {
        obj.attachEvent('on' + sEvent, fn)
      } else {
        obj.addEventListener(sEvent, fn, false)
      }
    },
    onMouseWheel: function (e) {
      var _o = this;
      if (e.wheelDelta ? e.wheelDelta < 0 : e.detail > 0) {
        if (_o.perspective < 4000) {
          _o.perspective += 150
        }
      } else {
        if (_o.perspective > 350) {
          _o.perspective -= 150
        }
      }
      _o.transform(
        _o.stage[0],
        'perspective(' +
        _o.perspective +
        'px) rotateX(' +
        _o.rotateX +
        'deg) rotateY(' +
        _o.rotateY +
        'deg)'
      )
      if (e.preventDefault) {
        e.preventDefault()
      }
      return false
    },
    startMove: function startMove(obj) {
      var _o = this;
      obj.timer = obj.timer || null
      clearInterval(obj.timer);
      obj.timer = setInterval(function () {
        _o.rotateX -= _o.speedY
        _o.rotateY += _o.speedX
        _o.speedY *= 0.93
        _o.speedX *= 0.93
        if (Math.abs(_o.speedX) < 0.1 && Math.abs(_o.speedY) < 0.1) {
          _o.stopMove(obj.timer)
        }
        _o.transform(
          obj,
          'perspective(' +
          _o.perspective +
          'px) rotateX(' +
          _o.rotateX +
          'deg) rotateY(' +
          _o.rotateY +
          'deg)'
        )
      }, 20)
    },
    stopMove: function (t) {
      clearInterval(t)
    },

    init: function () {
      var _o = this;
      Aui.each(_o.path, function (i) {
        var shadow = _o.piece(
          'linear-gradient(top, rgb(0, 0, 0) 50%, rgba(255, 255, 255, 0)), url(' +
          this +
          ');',
          'background-image'
        ),
          shadow = '<div class="over" style="' + shadow + '"></div>'
        _o.domStr +=
          '<dd style="border: none;background-repeat:no-repeat;background-size:500% 100%;background-position:' +
          ((i % 5) * 25 - 1) +
          '% 0;background-image:url(' +
          this +
          ');">' +
          shadow +
          '</dd>'
      })
      Aui(_o.stage).html(_o.domStr)
      var _oList = Aui('dd', _o.stage),
        _sLen = _o.path.length,
        _deg = 360 / _sLen,
        _tranZ =
          (_o.width / 2 + 40) /
          Math.tan(((360 / _sLen / 2) * Math.PI) / 180),
        _i = _sLen

      while (_i > 0) {
        ; (function (d, len, _oList, _o) {
          setTimeout(function () {
            var idx = len - d,
              oThis = _oList[idx]

            oThis.children[0].style.opacity = 0.2

            _o.transform(
              oThis,
              'rotateY(' +
              (idx * _deg + 45) +
              'deg) translateZ(' +
              _tranZ / 5.7 +
              'px)'
            )

          }, d * 20)
        })(_i--, _sLen, _oList, _o)
      }

      var wheel = function (e) {
        _o.onMouseWheel.call(_o, e || window.event)
      }
      _o.addEvent(_o.oDoc, 'mousewheel', wheel)
      _o.addEvent(_o.oDoc, 'DOMMouseScroll', wheel);


      // var AuiDoc = Aui(_o.oDoc)
      // AuiDoc.mousedown(function (e) {
      //   var moveX = e.clientX,
      //     moveY = e.clientY
      //   var startX = _o.rotateX
      //   var startY = _o.rotateY
      //   var lastX = moveX
      //   var lastY = moveY
      //   _o.speedX = _o.speedY = 0
      //   AuiDoc.mousemove(function (e) {
      //     var x = e.screenX,
      //       y = e.screenY
      //     _o.rotateY = startY + (e.clientX - moveX) / 10
      //     _o.rotateX = startX - (e.clientY - moveY) / 10
      //     _o.transform(
      //       _o.stage[0],
      //       'perspective(' +
      //       _o.perspective +
      //       'px) rotateX(' +
      //       _o.rotateX +
      //       'deg) rotateY(' +
      //       _o.rotateY +
      //       'deg)'
      //     )
      //     _o.speedX = (e.clientX - lastX) / 5
      //     _o.speedY = (e.clientY - lastY) / 5
      //     lastX = e.clientX
      //     lastY = e.clientY
      //   })
      //   AuiDoc.mouseup(function () {
      //     this.onmousemove = null

      //     this.onmouseup = null

      //     _o.startMove(_o.stage[0])
      //   })

      //   _o.stopMove(_o.stage[0].timer)

      //   return false
      // })
      // 手机端
      window.onload = function () {
        var startX = startY = endX = endY = 0;
        var body = document.getElementsByTagName('body')[0];
        body.addEventListener('touchstart', function (event) {
          var touch = event.targetTouches[0];
          //滑动起点的坐标
          var moveX = touch.pageX,
            moveY = touch.pageY;
          var startX = _o.rotateX
          var startY = _o.rotateY
          var lastX = moveX
          // var lastY = moveY
          _o.speedX = _o.speedY = 0
          body.addEventListener("touchmove", function (e) {
            var touch = e.targetTouches[0];
            //手势滑动时，手势坐标不断变化，取最后一点的坐标为最终的终点坐标
            endX = touch.pageX;
            // endY = touch.pageY;
            // console.log("endX:"+endX+","+"endY:"+endY);
            var x = e.screenX,
              y = e.screenY
            _o.rotateY = (endX - moveX) / 10
            _o.rotateX = -25
            _o.transform(
              _o.stage[0],
              'perspective(' +
              _o.perspective +
              'px) rotateX(' +
              -25 +
              'deg) rotateY(' +
              _o.rotateY +
              'deg)'
            )
            _o.speedX = (endX - lastX) / 5
            _o.speedY = 0
            lastX = endX
            // lastY = endY
          })
          body.addEventListener("touchend", function (event) {
            _o.startMove(_o.stage[0])
            var distanceX = endX - startX,
              distanceY = endY - startY;
            // console.log("distanceX:"+distanceX+","+"distanceY:"+distanceY);
            //移动端设备的屏幕宽度
            var clientHeight = document.documentElement.clientHeight;
            // console.log(clientHeight;*0.2);
            //判断是否滑动了，而不是屏幕上单击了
            if (startY != Math.abs(distanceY)) {
              //在滑动的距离超过屏幕高度的20%时，做某种操作
              if (Math.abs(distanceY) > clientHeight * 0.2) {
                //向下滑实行函数someAction1，向上滑实行函数someAction2
                // distanceY < 0 ? someAction1() : someAction2();
              }
            }
            startX = startY = endX = endY = 0;
          })
        });


        _o.stopMove(_o.stage[0].timer)

        return false
      }

      return _o
    }
  }

  return new _3Deffect(a, w, h, s, p, x, y)
}

Aui.ready(function () {
  if (/ie/g.test(Aui.browser())) {
    Aui('body')
      .html('Adam CSS 3.0 effect，支持非IE浏览器。你懂的！')

      .setStyle({
        color: '#fff',

        'text-align': 'center',

        'font-size': '50px',

        'font-weight': 'bolder',

        'line-height': '500px'
      })
  } else {
    Effect(
      [
        './images/1.png',
        './images/1.png',
        './images/1.png',
        './images/1.png',
        './images/1.png',
        './images/2.png',
        './images/2.png',
        './images/2.png',
        './images/2.png',
        './images/2.png',
        './images/3.png',
        './images/3.png',
        './images/3.png',
        './images/3.png',
        './images/3.png',
        './images/4.png',
        './images/4.png',
        './images/4.png',
        './images/4.png',
        './images/4.png',
        './images/5.png',
        './images/5.png',
        './images/5.png',
        './images/5.png',
        './images/5.png',
        './images/6.png',
        './images/6.png',
        './images/6.png',
        './images/6.png',
        './images/6.png',
        './images/7.png',
        './images/7.png',
        './images/7.png',
        './images/7.png',
        './images/7.png',
        './images/8.png',
        './images/8.png',
        './images/8.png',
        './images/8.png',
        './images/8.png',
        './images/9.png',
        './images/9.png',
        './images/9.png',
        './images/9.png',
        './images/9.png'
      ],
      200,
      200,
      Aui.byID('#stage'),
      2000,
      -25,
      0
    ).init()
  }
})



//手机端侧距离
function wetherScroll() {
  var startX = startY = endX = endY = 0;
  var body = document.getElementsByTagName('body')[0];
  body.addEventListener('touchstart', function (event) {
    var touch = event.targetTouches[0];
    //滑动起点的坐标
    startX = touch.pageX;
    startY = touch.pageY;
  });
  body.addEventListener("touchmove", function (event) {
    var touch = event.targetTouches[0];
    //手势滑动时，手势坐标不断变化，取最后一点的坐标为最终的终点坐标
    endX = touch.pageX;
    endY = touch.pageY;
    // console.log("endX:"+endX+","+"endY:"+endY);
  })
  body.addEventListener("touchend", function (event) {
    var distanceX = endX - startX,
      distanceY = endY - startY;
    // console.log("distanceX:"+distanceX+","+"distanceY:"+distanceY);
    //移动端设备的屏幕宽度
    var clientHeight = document.documentElement.clientHeight;
    // console.log(clientHeight;*0.2);
    //判断是否滑动了，而不是屏幕上单击了
    if (startY != Math.abs(distanceY)) {
      //在滑动的距离超过屏幕高度的20%时，做某种操作
      if (Math.abs(distanceY) > clientHeight * 0.2) {
        //向下滑实行函数someAction1，向上滑实行函数someAction2
        distanceY < 0 ? someAction1() : someAction2();
      }
    }
    startX = startY = endX = endY = 0;
  })
}

